<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favicon.ico">
    <title>在线教育网</title>

    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/page-learing-list.css" />
    
</head>

<body>

<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->
<div id="searcharea">
    <div class="learing-list">
        <div class="list-box">
            <ul>
                <li>一级分类：</li>
                <li ><a href="#" v-on:click="submitSearch('','','')">全部</a></li>
                <ol>
                    <li v-for="mt in mtList">
                        <a href="#" v-on:click="submitSearch(mt,'','')">{{mt}}</a>
                    </li>
                </ol>
                 <!--
                <ol>
                    <li>数据分析</li>
                    <li>机器学习工程</li>
                    <li>前端开发工程</li>
                    <li>人工智能工程</li>
                    <li>全栈工程</li>
                    <li>iOS工程</li>
                    <li>VR开发</li>
                    <li>深度学习</li>
                    <li>商业预测</li>
                </ol>-->

            </ul>
            <ul>
                <li>二级分类：</li>
                <li ><a href="#" v-on:click="submitSearch(searchParams.mt,'','')">全部</a></li>
                <ol v-if="searchParams.mt!=null">
                    <li v-for="st in stList">
                        <a href="#" v-on:click="submitSearch(searchParams.mt,st,'')">{{st}}</a>
                    </li>
                </ol>
                 <!--
                <ol>
                    <li>体系课程</li>
                    <li>大数据</li>
                    <li>云计算</li>
                </ol>
                <a href="#" class="more">更多 ∨</a>-->
            </ul>
            <ul>
                <li>难度等级：</li>
                <li><a href="#" v-on:click="submitSearch(searchParams.mt,searchParams.st,'')">全部</a></li>
                <ol>
                    <li><a href="#" v-on:click="submitSearch(searchParams.mt,searchParams.st,'204001')">初级</a></li>
                    <li><a href="#" v-on:click="submitSearch(searchParams.mt,searchParams.st,'204002')">中级</a></li>
                    <li><a href="#" v-on:click="submitSearch(searchParams.mt,searchParams.st,'204003')">高级</a></li>
                </ol>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-9 list-row-left">
                <div class="list-cont-left">
                    <!--
                    <div class="tit">
                        <ul class="nav nav-tabs ">
                            <li class="active"><a href="#">推荐</a></li>
                            <li><a href="#">最新</a></li>
                            <li><a href="#">热评</a></li>
                            <div class="page navbar-right">
                                <a href="#" class="prev">
                                    < </a>
                                        <span class="">1/28</span>
                                        <a href="#" class="next"> ></a>
                            </div>
                        </ul>
                    </div>-->
                    <div class="tab-content">
                        <div class="content-list">

                            <div class="recom-item" v-for="course in courseList" >
                                <a :href="'/course/'+course.id+'.html'" target="_blank">
                                    <p>
                                        <img :src="file_server+course.pic"  width="100%" alt=""></img>
                                        <!--<span class="lab">HOT</span>-->
                                    </p>
                                    <ul>
                                        <li v-html="course.name"> </li>
                                        <li><span v-if="course.grade=='204001'">初级</span>
                                            <span v-else-if="course.grade=='204002'">中级</span>
                                            <span v-else>高级</span>
                                            <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <!--
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo2.png" width="100%" alt=""><span class="lab">HOT</span></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>-->
                            

                        </div>
                        <div class="clearfix">
                           
                          

                        </div>
                    </div>
                    
                    <div class="clearfix">
                        <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="handleCurrentChange"
                        :current-page="pageNo"
                        :page-size="pageSize"
                        :total="total">
                    </el-pagination>
                    </div>
                </div>
            </div>
            <div class="col-md-3 list-row-rit">
                <div class="list-cont-right">
                    <div class="right-box">
                        <div class="tit">精品TOP榜</div>
                        <div class="contList">
                            <div class="contList-item">
                                <div class="box hov">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="../img/widget-topBg.png" width="100%" height="110" alt=""></div>
                                        <div class="desc">通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……</div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>

                        <div class="tit">猜你喜欢</div>
                        <div class="contList">
                            <div class="contList-item">
                                <div class="box hov">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="../img/widget-btnbg.png" width="100%" height="110" alt=""></div>
                                        <div class="desc">通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……</div>
                                    </div>
                                </div>
                            </div>
                           
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="../img/widget-btnbg.png" width="100%" height="110" alt=""></div>
                                        <div class="desc">通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!--底部版权-->
<!--#include virtual="/include/footer.html"-->

    <!-- 页面 css js -->

    <script type="text/javascript" src="http://www.51xuecheng.cn/static/plugins/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $('.list-box ol li').on('click', function() {
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
        })


        $('.list-cont-left .nav-tabs li').on('click', function() {
            $(this).addClass("active").siblings().removeClass('active');
        })


        $('.contList-item').hover(function() {
            $(this).find('.box').addClass('hov').parent().siblings().find('.box').removeClass('hov')
        }, function() {
            $(this).siblings().first().find('.box').addClass('hov').parent().siblings().find('.box').removeClass('hov')
        })
    </script>
    <style>
        .eslight{
            color:red;
        }
    </style>
    <script>
    /*查询课程列表*/
    const requestCourseList = (pageNo,pageSize,searchParams) => {
        return  requestGet('/api/search/course/list?pageNo='+pageNo+'&pageSize='+pageSize,searchParams);
    }
        var searchVm= new Vue({  
              el: "#searcharea", 
      
              data: {
                    pageNo:1,
                    pageSize:16,
                    total:0,
                    file_server:'http://file.51xuecheng.cn',
                    courseInfo:{
                      name:'',
                      pic:'',
                      grade:''
                  },
                  searchParams:{
                    keywords:'',
                    st:'',
                    mt:'',
                    grade:''
                  },
                  courseList:[],
                  mtList:[],
                  stList:[]
              },
              methods: {
                
                  submitSearch(mt,st,grade) {         
                    this.searchParams.mt = mt
                    this.searchParams.st = st 
                    this.searchParams.grade = grade       
                    requestCourseList(this.pageNo,this.pageSize,this.searchParams).then(res=>{
                        console.log(res);
                        this.courseList = res.items;
                        this.total = res.counts;
                        console.log(this.courseList);
                        this.mtList = res.mtList;
                        this.stList = res.stList;
                    })

                  },
                  
                  handleCurrentChange(val){
                    this.pageNo = val;
                    this.submitSearch(this.searchParams.mt,this.searchParams.st,this.searchParams.grade)
                  }
              },
             created() {
                var keywords = GetQueryString("keywords");
                console.log("keywords="+keywords)
                if(keywords){
                    this.searchParams.keywords = keywords
                    document.getElementById("keywords-text").value=keywords;
                }
                var grade = GetQueryString("grade");
                if(grade){
                    this.searchParams.grade = grade
                }
                var mt = GetQueryString("mt");
                if(mt){
                    this.searchParams.mt = mt
                }
                var st = GetQueryString("st");
                if(st){
                    this.searchParams.st = st
                }
                this.submitSearch(this.mt,this.st,this.grade)
                
              },
              mounted(){
                 
              }
          })

      </script>
</body>